<template>
  <el-container class="layout">
    <v-plain-header>
      <span class="message" @click="$router.push('/message')">
        <i class="iconfont icon-tixing"></i>
        提醒
        <v-plain-tips :num="allCount"/>
      </span>
      <el-dropdown @command="c=>this[c]()" trigger="click" class="dropdown">
                <span>
                {{roleName}}  &nbsp;&nbsp;{{username}}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item :command="item.command" v-for="item in dropList" :key="item.command">
            {{item.label}}
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </v-plain-header>
    <el-container class="main pd-10">
      <el-aside width="auto">
        <v-plain-menu :menus="menus"/>
      </el-aside>
      <el-main>
        <v-plain-bread/>
        <router-view></router-view>
      </el-main>
    </el-container>
    <v-plain-footer/>
  </el-container>
</template>
<script lang="ts">
  import { Vue, Component, Prop } from 'vue-property-decorator'
  import vPlainMenu from '@/components/plain-menu'
  import vPlainHeader from '@/components/plain-header'
  import vPlainFooter from '@/components/plain-footer'
  import vPlainBread from '@/components/plain-bread'
  import { Action, Getter, Mutation } from 'vuex-class'
  import Clipboard from 'clipboard'
  import vPlainTips from '@/components/plain-tips'

  @Component(
    {
      components: {
        vPlainMenu, vPlainHeader, vPlainFooter, vPlainBread, vPlainTips
      }
    }
  )
  export default class Layout extends Vue {
    menus = [
      {
        name: '主页',
        url: '/home',
        icon: 'icon-shouye'
      }
    ]
    dropList = [
      {
        command: 'exit',
        label: '退出登录'
      }
    ]

    @Getter userInfo
    @Mutation removeUserInfo
    @Mutation makeBreadList
    @Action getUnreadTips
    @Getter unreadTips
    @Action getMenusTips

    get username () {
      return JSON.parse(window.sessionStorage.getItem('userInfo')).username
    }

    get roleName () {
      return this.$utils.toTypeFormat(JSON.parse(window.sessionStorage.getItem('userInfo')).roleType,this.$dict.roleTypes)
    }

    get allCount () {
      return this.unreadTips.allCount
    }

    get roleType () {
      return JSON.parse(window.sessionStorage.getItem('userInfo')).roleType
    }

    async getMenus () {
      let res: AjaxResponse = await this.$axios.get('b/boms/menu/user/menus')
      this.$utils.tips(res)
      this.menus = [...this.menus, ...res.data.menuDtos]
      switch (this.roleType) {
        case 1 : //大掌柜
          this.menus[0].url = '/home/boss'
          break
        case 2 : // 客服
          this.menus[0].url = '/home/customer-service'
          break
        case 3 :  // 渠道专员
          this.menus[0].url = '/home/channel-commissioner'
          break
        case 6 : // 官方渠道专员
          this.menus[0].url = '/home/channel-commissioner'
          break
      }
      if (this.$route.path === '/home') {
        this.$router.replace(this.menus[0].url)
      }
    }

    async exit () {
      let res: AjaxResponse = await this.$axios.post('b/boms/user/logout')
      this.removeUserInfo()
      this.$utils.tips(res)
      this.$router.push('/login')
    }

    user () {
      this.$router.push('/user-center')
    }

    mounted () {
      this.getMenus()
      this.$router.afterEach((to, form) => {
        this.makeBreadList(this)
      })
      this.getMenusTips()
      this.getUnreadTips()
    }
  }
</script>
<style lang="less" scoped>
  .layout {
    height: 100vh;
    flex-direction: column;
  }

  .main {
    flex: 1;
    display: flex;
    background: #f0f2f5;
  }

  .el-main {
    padding: 0 10px;
    min-width: 1200px;
    display: flex;
    flex-direction: column;
  }

  .message {
    color: #666;
    font-size: 18px;
    margin-right: 20px;
    cursor: pointer;
  }
  .dropdown{
    cursor: pointer;
  }
</style>
<style lang="less">
    .pageation {
        display: flex;
        justify-content: space-between;
    }
</style>
